<template>
  <div class="app-container">
    <el-row>
        <el-button v-show="checkPermission('courseAdd')" size="small" type="primary" @click="addCourse">新建课程</el-button>
        <!-- <el-button size="small" type="primary" @click="addCourse">新建课程</el-button> -->
        <el-radio-group style="margin-left:20px" v-model="value" @change="changeStatus">
          <el-radio
           v-for="item in statusOptions"
          :key="item.value"
          :label="item.value"
          >{{item.lable}}
          </el-radio>
        </el-radio-group>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          ref="courseTable"
          :data="courseData"
          border
          max-height="720"
          :header-cell-style="{background:global.mainColor}"
          style="width: 100%;min-height:719px"
        >
          <el-table-column
            prop="introducePictures"
            label="课程封面"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <div class="img-cover">
               <img :src="scope.row.introducePictures.split(',')[0]" alt="图片加载失败">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="课程名称"
            align="center"
          />
          <el-table-column
            prop="categoryName"
            label="课程分类"
            align="center"
          />
          <el-table-column
            label="状态"
            align="center"
          >
          <template slot-scope="scope">
            {{global.statusName(scope.row.status)}}
          </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="400"
          >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status == 2 && checkPermission('courseEdit') || scope.row.status == 1 && checkPermission('courseEdit')|| scope.row.status == 4&& checkPermission('courseEdit')"
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                v-if="scope.row.status == 2 || scope.row.status == 4"
                size="mini"
                type="success"
                @click="handlePutOn(scope.$index, scope.row)"
              >上架</el-button>
              <el-button
                v-if="scope.row.status == 3"
                size="mini"
                type="success"
                @click="handleDismount(scope.$index, scope.row)"
              >下架</el-button>
              <el-button
                v-if="scope.row.status == 3 "
                size="mini"
                type="primary"
                @click="handleQrcode(scope.$index, scope.row)"
              >课程推广码</el-button>
              <el-button
                v-if="scope.row.status == 2 || scope.row.status == 1 || scope.row.statuse == 3 || scope.row.status == 4"
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
              <!-- <el-button
                v-if="scope.row.status == 4"
                size="mini"
                type="success"
                @click="handlePreview(scope.$index, scope.row)"
              >预览</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <!-- 课程推广码 -->
    <el-dialog
      :title="qrCodeName"
      :visible.sync="qrDialog"
      width="600px"
    >
      <el-row type="flex" justify="center">
        <el-image class="qrcode-img" :src="qrCodeUrl" />
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="qrDialog = false">关 闭</el-button>
      </span>
    </el-dialog>

     <!-- 预览 -->
    <el-dialog
      :title="qrCodeName "
      :visible.sync="courseDetailsDialog"
      width="750px"
      center
    >
     <div v-if="courseDetails" class="courseDetails">
       <div v-html="courseDetails"></div>
     </div>
     <div v-else>请完善详情</div>
      <span slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="courseDetailsDialog = false">关 闭</el-button>
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { courseList, coursePutOn, courseDown, QRcode, deleteCourse } from '@/api/curriculum'

export default {
  name: 'CourseList',

  data() {
    return {
      courseDetailsDialog: false, // 课程详情
      courseDetails: '',
      // 课程推广码dialog
      qrDialog: false,
      qrCodeName: '',
      qrCodeUrl: '',
      value: null,
      page: 1,
      pageSize: 10,
      total: 10,
      statusOptions: [
        {
          value: null,
          lable: '全部'
        },
        {
          value: 1,
          lable: '待编辑'
        },
        {
          value: 2,
          lable: '待上架'
        },
        {
          value: 3,
          lable: '已上架'
        },
        {
          value: 4,
          lable: '已下架'
        }
      ],
      courseData: [

      ]
    }
  },
  computed: {

  },
  created() {
    this.getCourseList()
  },
  methods: {
    addCourse() {
      this.$router.push({
        path: '/educational/curriculum/courseAdd'
      })
    },
    changeStatus() {
      this.page = 1
      this.pageSize = 10
      this.getCourseList()
    },
    // 编辑
    handleEdit(index, row) {
      TDAPP.onEvent('课程编辑')
      this.$router.push({
        path: '/educational/curriculum/courseEdit',
        query: {
          id: row.id
        }
      })
    },
    // 上架
    handlePutOn(index, row) {
      coursePutOn({
        id: row.id
      }).then(res => {
        TDAPP.onEvent('课程上架')
        this.$message({
          type: 'success',
          message: '上架成功'
        })
        this.getCourseList()
      }).catch(() => {})
    },
    // 下架
    async handleDismount(index, row) {
      const confirm = await this.$confirm(`确认下架${row.name}课程吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {})
      if (!confirm) return
      await courseDown({
        id: row.id
      }).then(res => {
        TDAPP.onEvent('课程下架')
        this.$message({
          type: 'success',
          message: '下架成功'
        })
        this.getCourseList()
      })
    },
    async handleQrcode(index, row) {
      TDAPP.onEvent('课程推广码')
      const res = await QRcode({
        id: row.id,
        pagesPath: `pages/courseDetail/courseDetail`
      })
      const data = res.data
      if (!data) return
      if (data instanceof Object) {
        this.qrCodeUrl = data.qrcodeImg
      } else {
        this.qrCodeUrl = data
      }
      this.qrCodeName = row.name
      this.qrDialog = true
    },
    // 删除
    async handleDelete(index, row) {
      const confim = await this.$confirm('删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      console.log(confim, '.....')
      if (!confim) return
      deleteCourse({
        id: row.id
      }).then(res => {
        TDAPP.onEvent('课程删除')
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getCourseList()
      })
    },
    // 预览
    handlePreview(index, row) {
      // this.courseDetails = row.details
      // this.qrCodeName = row.name
      // this.courseDetailsDialog = true
      this.$router.push({
        path: '/educational/curriculum/edit',
        query: {
          id: row.id,
          view: '1'
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getCourseList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getCourseList()
      this.$nextTick(() => {
        this.$refs.courseTable.bodyWrapper.scrollTop = 0
      })
    },
    // 获取课程分页
    getCourseList() {
      courseList({
        businessId: this.$store.getters.businessId,
        currentPage: this.page,
        pageSize: this.pageSize,
        status: this.value
      }).then(res => {
        this.total = res.data.total
        this.courseData = res.data.records
        // console.log(this.courseData, arr, 'arr')
      }).catch(() => {

      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-row{
    margin-bottom:20px;
  }
  /deep/.el-table .cell{
    display: flex;
    justify-content: center;
  }
  .img-cover{
    width: 100px;
    height: 100%;
  }
  .img-cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .qrcode-img{
    /* width: 100%;
    height: 100%; */
  }
  /deep/.courseDetails{
    height: 600px;
    overflow: hidden;
    overflow-y: scroll;
    img{
      width: 100%;
      height: auto;
    }
  }
  .el-row{
    justify-content: center;
  }
</style>
